<template>
    <div class="register">
        <el-card>
            <el-form
                    :label-position="'top'"
                    label-width="100px"
                    :model="formLabelAlign"
                    style="max-width: 460px"
                    ref="ruleFormRef"
            >
                <el-form-item>
                    <h2>忘记密码</h2>
                </el-form-item>
                <el-form-item label="原密码" prop="password"
                              :rules="{required:true,message:'请输入原密码',trigger: 'blur'}">
                    <el-input v-model="formLabelAlign.password"/>
                </el-form-item>
                <el-form-item label="新密码" prop="newPass"
                              :rules="{required:true,message:'请输入新密码',trigger: 'blur'}">
                    <el-input v-model="formLabelAlign.newPass"/>
                </el-form-item>
                <el-form-item>
                    <el-link @click="to('/login')">已有账号，前往登录</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(ruleFormRef)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/request";
import {requestCode, resetPass, updateUserInfo} from "@/request/user";
import {ElMessage} from "element-plus";

name = "PersonPassView"

const router = useRouter();

const formLabelAlign = ref({
    newPass: '',
    password: ''
});

let time = -1;

const onSubmit = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            resetPass(formLabelAlign.value).then(({data}) => {
                console.log(data)
                if (data.code === 200) {
                    ElMessage.success("密码修改成功");
                    router.push("/")
                }
            });
            console.log('submit!');
        }
    });
};

const ruleFormRef = ref();


const to = (path) => {
    router.push(path);
};
</script>

<style scoped>
.register {
    font-size: 16px;
    max-width: 350px;
    min-width: 200px;
    text-align: center;
    margin: 100px auto;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}
</style>

